<template>
  <div class="profile-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h2>个人资料</h2>
        <p>管理您的个人信息和账户设置</p>
      </div>
      <div class="header-actions">
        <el-button :icon="Refresh" @click="refreshData">刷新</el-button>
        <el-button type="primary" :icon="Check" @click="saveProfile" :loading="saving">
          保存更改
        </el-button>
      </div>
    </div>

    <div class="profile-content" v-loading="loading">
      <el-row :gutter="24">
        <!-- 左侧：头像和基本信息 -->
        <el-col :xs="24" :lg="8">
          <el-card class="profile-card">
            <template #header>
              <h3>头像设置</h3>
            </template>
            
            <div class="avatar-section">
              <div class="avatar-container">
                <el-avatar :size="120" :src="profileForm.avatar" fit="contain" class="user-avatar">
                  <el-icon><User /></el-icon>
                </el-avatar>
                <div class="avatar-overlay" @click="showAvatarDialog = true">
                  <el-icon><Camera /></el-icon>
                  <span>更换头像</span>
                </div>
              </div>
              
              <div class="user-info">
                <h4>{{ profileForm.name || '未设置姓名' }}</h4>
                <p class="user-role">{{ profileForm.role || '普通用户' }}</p>
                <p class="user-email">{{ profileForm.email }}</p>
                <div class="user-stats">
                  <div class="stat-item">
                    <span class="stat-label">注册时间</span>
                    <span class="stat-value">{{ profileForm.registerTime }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">最后登录</span>
                    <span class="stat-value">{{ profileForm.lastLogin }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 账户安全 -->
          <el-card class="security-card">
            <template #header>
              <h3>账户安全</h3>
            </template>
            
            <div class="security-items">
              <div class="security-item">
                <div class="security-info">
                  <h5>登录密码</h5>
                  <p>定期更换密码可以提高账户安全性</p>
                </div>
                <el-button type="primary" link @click="showPasswordDialog = true">
                  修改密码
                </el-button>
              </div>
              
              <div class="security-item">
                <div class="security-info">
                  <h5>两步验证</h5>
                  <p>{{ profileForm.twoFactorEnabled ? '已启用' : '未启用' }}</p>
                </div>
                <el-switch 
                  v-model="profileForm.twoFactorEnabled" 
                  @change="handleTwoFactorChange"
                />
              </div>
              
              <div class="security-item">
                <div class="security-info">
                  <h5>登录通知</h5>
                  <p>{{ profileForm.loginNotification ? '已启用' : '未启用' }}</p>
                </div>
                <el-switch 
                  v-model="profileForm.loginNotification" 
                  @change="handleLoginNotificationChange"
                />
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧：详细信息表单 -->
        <el-col :xs="24" :lg="16">
          <el-card class="form-card">
            <template #header>
              <h3>基本信息</h3>
            </template>
            
            <el-form 
              :model="profileForm" 
              :rules="formRules" 
              ref="profileFormRef"
              label-width="120px"
              class="profile-form"
            >
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="profileForm.name" placeholder="请输入姓名" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="profileForm.nickname" placeholder="请输入昵称" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="profileForm.email" placeholder="请输入邮箱" disabled />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model="profileForm.phone" placeholder="请输入手机号" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="性别" prop="gender">
                    <el-select v-model="profileForm.gender" placeholder="请选择性别" style="width: 100%">
                      <el-option label="男" value="male" />
                      <el-option label="女" value="female" />
                      <el-option label="保密" value="secret" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="生日" prop="birthday">
                    <el-date-picker
                      v-model="profileForm.birthday"
                      type="date"
                      placeholder="请选择生日"
                      style="width: 100%"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="所在地区" prop="location">
                <el-cascader
                  v-model="profileForm.location"
                  :options="locationOptions"
                  placeholder="请选择所在地区"
                  style="width: 100%"
                />
              </el-form-item>

              <el-form-item label="个人简介" prop="bio">
                <el-input
                  v-model="profileForm.bio"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入个人简介"
                  maxlength="200"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item label="兴趣爱好" prop="interests">
                <el-select
                  v-model="profileForm.interests"
                  multiple
                  placeholder="请选择兴趣爱好"
                  style="width: 100%"
                >
                  <el-option label="阅读" value="reading" />
                  <el-option label="运动" value="sports" />
                  <el-option label="音乐" value="music" />
                  <el-option label="电影" value="movies" />
                  <el-option label="旅行" value="travel" />
                  <el-option label="摄影" value="photography" />
                  <el-option label="编程" value="programming" />
                  <el-option label="游戏" value="gaming" />
                </el-select>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 偏好设置 -->
          <el-card class="preferences-card">
            <template #header>
              <h3>偏好设置</h3>
            </template>
            
            <div class="preferences-content">
              <div class="preference-item">
                <div class="preference-info">
                  <h5>邮件通知</h5>
                  <p>接收系统重要通知和更新</p>
                </div>
                <el-switch v-model="profileForm.emailNotification" />
              </div>
              
              <div class="preference-item">
                <div class="preference-info">
                  <h5>短信通知</h5>
                  <p>接收验证码和重要提醒</p>
                </div>
                <el-switch v-model="profileForm.smsNotification" />
              </div>
              
              <div class="preference-item">
                <div class="preference-info">
                  <h5>营销推送</h5>
                  <p>接收产品推荐和优惠信息</p>
                </div>
                <el-switch v-model="profileForm.marketingNotification" />
              </div>
              
              <div class="preference-item">
                <div class="preference-info">
                  <h5>数据分析报告</h5>
                  <p>定期接收个人数据分析报告</p>
                </div>
                <el-switch v-model="profileForm.reportNotification" />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 头像上传对话框 -->
    <el-dialog v-model="showAvatarDialog" title="更换头像" width="500px">
      <div class="avatar-upload">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :headers="uploadHeaders"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          name="avatar"
          accept="image/jpeg,image/jpg,image/png"
        >
          <img v-if="tempAvatar" :src="tempAvatar" class="avatar-preview" />
          <div v-else class="avatar-upload-placeholder">
            <el-icon><Plus /></el-icon>
            <div class="upload-text">点击上传头像</div>
          </div>
        </el-upload>
        <div class="upload-tips">
          <p>• 支持 JPG、PNG 格式</p>
          <p>• 支持任意尺寸的图片</p>
          <p>• 头像将完整显示，不会被裁剪</p>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAvatarDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmAvatar" :disabled="!tempAvatar">
            确认更换
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="showPasswordDialog" title="修改密码" width="400px">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            placeholder="请输入当前密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            placeholder="请输入新密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showPasswordDialog = false">取消</el-button>
          <el-button type="primary" @click="handleChangePassword" :loading="changingPassword">
            确认修改
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Refresh, Check, User, Camera, Plus
} from '@element-plus/icons-vue'
import { getUserInfo, updateProfile, changePassword } from '@/api/auth'
import { useUserStore } from '@/store/user'

// 响应式数据
const saving = ref(false)
const changingPassword = ref(false)
const showAvatarDialog = ref(false)
const showPasswordDialog = ref(false)
const tempAvatar = ref('')
const profileFormRef = ref(null)
const passwordFormRef = ref(null)
const loading = ref(false)

const userStore = useUserStore()

// 上传配置
const uploadUrl = ref(process.env.VUE_APP_API_BASE_URL + '/auth/upload-avatar/' || 'http://localhost:8000/api/v1/auth/upload-avatar/')
const uploadHeaders = computed(() => ({
  'Authorization': 'Bearer ' + userStore.token
}))

// 个人资料表单
const profileForm = reactive({
  id: null,
  username: '',
  name: '',
  nickname: '',
  email: '',
  phone: '',
  gender: '',
  birthday: '',
  location: [],
  bio: '',
  interests: [],
  avatar: '',
  role: '',
  registerTime: '',
  lastLogin: '',
  twoFactorEnabled: false,
  loginNotification: true,
  emailNotification: true,
  smsNotification: true,
  marketingNotification: false,
  reportNotification: true,
  // 用户画像信息
  age: null,
  income: null,
  education_level: '',
  occupation: '',
  marital_status: '',
  family_size: null
})

// 密码修改表单
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 地区选项
const locationOptions = ref([
  {
    value: '北京市',
    label: '北京市',
    children: [
      { value: '朝阳区', label: '朝阳区' },
      { value: '海淀区', label: '海淀区' },
      { value: '西城区', label: '西城区' },
      { value: '东城区', label: '东城区' }
    ]
  },
  {
    value: '上海市',
    label: '上海市',
    children: [
      { value: '浦东新区', label: '浦东新区' },
      { value: '黄浦区', label: '黄浦区' },
      { value: '静安区', label: '静安区' },
      { value: '徐汇区', label: '徐汇区' }
    ]
  },
  {
    value: '广东省',
    label: '广东省',
    children: [
      { value: '广州市', label: '广州市' },
      { value: '深圳市', label: '深圳市' },
      { value: '珠海市', label: '珠海市' },
      { value: '东莞市', label: '东莞市' }
    ]
  }
])

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
}

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 方法
const refreshData = async () => {
  await loadUserProfile()
  ElMessage.success('数据已刷新')
}

const loadUserProfile = async () => {
  try {
    loading.value = true
    const response = await getUserInfo()

    if (response.success) {
      const userData = response.data
      const profile = userData.profile || {}

      // 更新表单数据
      Object.assign(profileForm, {
        id: userData.id,
        username: userData.username,
        name: userData.real_name || '',
        nickname: userData.username,
        email: userData.email || '',
        phone: userData.phone || '',
        avatar: userData.avatar_url || '',
        role: userData.role_name || '',
        registerTime: userData.created_at ? new Date(userData.created_at).toLocaleDateString() : '',
        lastLogin: userData.last_login_at ? new Date(userData.last_login_at).toLocaleString() : '从未登录',

        // 用户画像信息
        age: profile.age || null,
        gender: profile.gender || '',
        location: profile.location ? profile.location.split(',') : [],
        income: profile.income || null,
        interests: profile.interests || [],
        education_level: profile.education_level || '',
        occupation: profile.occupation || '',
        marital_status: profile.marital_status || '',
        family_size: profile.family_size || null
      })
    }
  } catch (error) {
    console.error('加载用户信息失败:', error)
    ElMessage.error('加载用户信息失败')
  } finally {
    loading.value = false
  }
}

const saveProfile = async () => {
  if (!profileFormRef.value) return

  try {
    await profileFormRef.value.validate()
    saving.value = true

    // 准备提交数据
    const submitData = {
      real_name: profileForm.name,
      email: profileForm.email,
      phone: profileForm.phone,
      avatar_url: profileForm.avatar,
      profile: {
        age: profileForm.age,
        gender: profileForm.gender,
        location: Array.isArray(profileForm.location) ? profileForm.location.join(',') : profileForm.location,
        income: profileForm.income,
        interests: profileForm.interests,
        education_level: profileForm.education_level,
        occupation: profileForm.occupation,
        marital_status: profileForm.marital_status,
        family_size: profileForm.family_size
      }
    }

    const response = await updateProfile(submitData)

    if (response.success) {
      ElMessage.success('个人资料保存成功')
      // 更新用户存储中的信息
      await userStore.getUserInfo()
    } else {
      ElMessage.error(response.message || '保存失败')
    }
  } catch (error) {
    console.error('保存个人资料失败:', error)
    ElMessage.error('保存失败，请检查表单信息')
  } finally {
    saving.value = false
  }
}

const handleTwoFactorChange = (value) => {
  if (value) {
    ElMessageBox.confirm(
      '启用两步验证后，登录时需要额外的验证步骤，确定要启用吗？',
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      ElMessage.success('两步验证已启用')
    }).catch(() => {
      profileForm.twoFactorEnabled = false
    })
  } else {
    ElMessage.success('两步验证已关闭')
  }
}

const handleLoginNotificationChange = (value) => {
  ElMessage.success(value ? '登录通知已启用' : '登录通知已关闭')
}

const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'

  if (!isJPG) {
    ElMessage.error('头像只能是 JPG/PNG 格式!')
    return false
  }

  // 预览图片
  const reader = new FileReader()
  reader.onload = (e) => {
    tempAvatar.value = e.target.result
  }
  reader.readAsDataURL(file)

  return true
}

const handleAvatarSuccess = (response) => {
  if (response.success) {
    profileForm.avatar = response.data.avatar_url
    tempAvatar.value = response.data.avatar_url

    // 立即更新用户存储中的头像信息
    userStore.updateAvatar(response.data.avatar_url)

    ElMessage.success('头像上传成功')
  } else {
    ElMessage.error(response.message || '头像上传失败')
  }
}

const handleAvatarError = (error) => {
  console.error('头像上传失败:', error)
  ElMessage.error('头像上传失败')
}

const confirmAvatar = () => {
  profileForm.avatar = tempAvatar.value
  showAvatarDialog.value = false

  // 立即更新用户存储中的头像信息
  userStore.updateAvatar(tempAvatar.value)

  tempAvatar.value = ''
  ElMessage.success('头像更换成功')
}

const handleChangePassword = async () => {
  if (!passwordFormRef.value) return

  try {
    await passwordFormRef.value.validate()
    changingPassword.value = true

    const response = await changePassword({
      current_password: passwordForm.currentPassword,
      new_password: passwordForm.newPassword
    })

    if (response.success) {
      showPasswordDialog.value = false
      passwordForm.currentPassword = ''
      passwordForm.newPassword = ''
      passwordForm.confirmPassword = ''
      ElMessage.success('密码修改成功')
    } else {
      ElMessage.error(response.message || '密码修改失败')
    }
  } catch (error) {
    console.error('修改密码失败:', error)
    ElMessage.error('密码修改失败，请检查输入信息')
  } finally {
    changingPassword.value = false
  }
}

// 生命周期
onMounted(() => {
  loadUserProfile()
})
</script>

<style scoped>
.profile-page {
  padding: 0;
  background-color: transparent;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-content h2 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.header-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 内容区域 */
.profile-content {
  margin-bottom: 24px;
}

.profile-content .el-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.profile-content .el-card :deep(.el-card__header) {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.profile-content .el-card :deep(.el-card__header) h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

/* 头像区域 */
.avatar-section {
  text-align: center;
  padding: 20px 0;
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: #f5f7fa;
  padding: 4px;
}

.user-avatar {
  border: 4px solid #f0f0f0;
  transition: all 0.3s ease;
}

.user-avatar :deep(.el-avatar) {
  object-fit: contain !important;
  background-color: #f5f7fa;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
  color: white;
  font-size: 12px;
}

.avatar-container:hover .avatar-overlay {
  opacity: 1;
}

.user-info h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.user-role {
  margin: 0 0 4px 0;
  color: #409EFF;
  font-size: 14px;
  font-weight: 500;
}

.user-email {
  margin: 0 0 16px 0;
  color: #666;
  font-size: 14px;
}

.user-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-label {
  color: #666;
  font-size: 12px;
}

.stat-value {
  color: #333;
  font-size: 12px;
  font-weight: 500;
}

/* 安全设置 */
.security-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
}

.security-info h5 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.security-info p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

/* 表单区域 */
.profile-form {
  padding: 20px 0;
}

/* 偏好设置 */
.preferences-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}

.preference-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
}

.preference-info h5 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.preference-info p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

/* 头像上传 */
.avatar-upload {
  text-align: center;
}

.avatar-uploader :deep(.el-upload) {
  border: 2px dashed #d9d9d9;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: #409EFF;
}

.avatar-preview {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: 10px;
  background-color: #f5f7fa;
}

.avatar-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.avatar-upload-placeholder .el-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 14px;
}

.upload-tips {
  margin-top: 16px;
  text-align: left;
}

.upload-tips p {
  margin: 4px 0;
  color: #666;
  font-size: 12px;
}

.dialog-footer {
  display: flex;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .profile-content .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .header-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .security-item,
  .preference-item {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .stat-item {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .profile-form :deep(.el-form-item__label) {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .profile-page {
    padding: 0 16px;
  }

  .page-header {
    padding: 16px;
  }

  .profile-content .el-card :deep(.el-card__body) {
    padding: 16px;
  }

  .avatar-uploader :deep(.el-upload) {
    width: 150px;
    height: 150px;
  }

  .avatar-preview {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background-color: #f5f7fa;
  }

  .user-avatar {
    width: 80px !important;
    height: 80px !important;
  }

  .header-actions {
    flex-direction: column;
    width: 100%;
  }

  .header-actions .el-button {
    width: 100%;
  }
}

/* 超小屏幕适配 */
@media (max-width: 360px) {
  .profile-content .el-card :deep(.el-card__body) {
    padding: 12px;
  }

  .avatar-uploader :deep(.el-upload) {
    width: 120px;
    height: 120px;
  }

  .avatar-preview {
    width: 120px;
    height: 120px;
    object-fit: contain;
    background-color: #f5f7fa;
  }

  .user-avatar {
    width: 60px !important;
    height: 60px !important;
  }
}
</style>
